<template>
	<view class="container">
		<image src="/static/login/nav_back_602.png" class="return_img" @tap="backToppage()"></image>
		<view class="login_headTitle">
			<text class="login_headTitle_big">重置密码</text>
		</view>
		<!-- 输入框 -->
		<view class="login_inputBox">
			<view class="login_inputBox_inner">
				<view class="inner_titleBox">
					<text>手机号</text>
				</view>
				<view class="inner_iptBox">
					<input type="text" placeholder="请输入手机号码" placeholder-class="placStyle" v-model="userphone">
				</view>
			</view>
			<view class="login_inputBox_inner">
				<view class="inner_titleBox">
					<text>验证码</text>
				</view>
				<view class="inner_iptBox_code">
					<input type="text" placeholder="请输入验证码" placeholder-class="placStyle" v-model="yzcode">
					<view class="code_box">
						<view class="code_box_bor"></view>
						<button @tap="getCode()" :style="{color:codeyes?'#FF7648':'#888'}">{{getCodetext}}</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 登陆按钮 -->
		<view class="login_submit" @tap="nextStep()">
			<text>下一步</text>
		</view>
	</view>
</template>

<script>
	import {sendCode} from '@/apis/request.js'
	import {updatePassbeforeLogin} from '@/apis/request.js'
	export default {
		data() {
			return {
				userphone:'',
				yzcode:'',
				sendyz:'',
				codephone:'',
				codeyes:true,
				getCodetext:'验证码'
			};
		},
		methods:{
			getCode(){
			  if(!this.codeyes){
				  uni.showToast({
				  	icon:'none',
					title:'请等待倒计时结束'
				  });
				  return ;
			  }
			  if(this.userphone == ''){
				  uni.showToast({
				  	 icon:'none',
					 title:'输入手机号'
				  });
				  return ;
			  }
			  if(this.userphone.length!=11 || isNaN(this.userphone)){
				  uni.showToast({
				  	icon:'none',
					title:'手机号输入不正确'
				  });
				  return ;
			  }
				this.$http({
					url:sendCode,
					method:"GET",
					data:{
						phone:this.userphone
					},
					header:{'content-type':'application/json'}
				})
				.then(res=>{
					console.log(res[1].data.data);
					this.sendyz=res[1].data.data;
				    //验证码倒计时
					this.codephone=this.userphone; //保存发送验证码的手机号
					let seconds=60;
					this.codeyes=false;
					this.getCodetext=`${seconds}s`;
					let cutDown=setInterval(()=>{
						--seconds;
						this.getCodetext=`${seconds}s`;
					},1000);
					setTimeout(()=>{
						clearInterval(cutDown);
						this.codeyes=true;
						this.getCodetext='验证码';
					},60000)
				})
				.catch(err=>{
					console.log(err);
				});
			},
			nextStep(){
				if(this.userphone==''){
					uni.showToast({
						icon:'none',
						title:'输入手机号'
					});
					return ;
				}
				if(this.sendyz==''){
					uni.showToast({
						icon:'none',
						title:'请先发送验证码'
					});
					return ;
				}
				if(this.userphone.length!=11 || isNaN(this.userphone)){
					uni.showToast({
						icon:'none',
						title:'手机号输入不正确'
					});
					return ;
				}
				if(this.yzcode==''){
					uni.showToast({
						icon:'none',
						title:'输入验证码'
					});
					return ;
				}
				if(this.yzcode != this.sendyz){
					uni.showToast({
						icon:'none',
						title:'验证码错误'
					});
					return ;
				}
				if(this.userphone != this.codephone){
					uni.showToast({
						icon:'none',
						title:'验证码手机号校验错误'
					});
					return ;
				}
				uni.navigateTo({
					url:`./fogetPassNext/fogetPassNext?phone=${this.userphone}&code=${this.yzcode}`
				})
			},
			backToppage(){
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>

<style lang="scss">
.placStyle{
	color: #888888;
	font-size: 28rpx;
	margin-left: 50rpx;
}
.return_img{
	width: 27rpx;
	height: 41rpx;
	position: fixed;
	left: 30rpx;
	top: 80rpx;
}
.login_headTitle{
	padding-left: 100rpx;
	margin-top: 190rpx;
	&_big{
		font-size: 59rpx;
		color: #0EAE64;
		margin-bottom: 43rpx;
	};
}
.login_inputBox{
	margin-top: 179rpx;
	&_inner{
		display: flex;
		height: 57rpx;
		align-items: center;
		justify-content: center;
		margin-bottom: 64rpx;
		.inner_titleBox{
			text{
				color: #222222;
				font-size: 32rpx;
			}
		}
		.inner_iptBox{
			width: 473rpx;
			height: 57rpx;
			border-bottom: 2rpx solid #D2D2D2;
			input{
				width: 100%;
				height: 100%;
			}
		}
		.inner_iptBox_code{
			width: 473rpx;
			height: 57rpx;
			border-bottom: 2rpx solid #D2D2D2;
			display: flex;
			align-items: center;
			input{
				width: 70%;
				height: 100%;
			}
			.code_box{
				flex: 1;
				height: 57rpx;
				display: flex;
				align-items: center;
				.code_box_bor{
					width: 2rpx;
					height: 24rpx;
					background-color: #888888;
				}
				button::after{
					border: none;
				}
				button{
					padding: 0;
					margin: 0;
					width: 100%;
					height: 100%;
					color: #FF7648;
					font-size: 27rpx;
					background-color: transparent;
					line-height: 57rpx;
				}
			}
		}
	}
}
.login_submit{
	display: flex;
	justify-content: center;
	margin-top: 154rpx;
	text{
		display: block;
		width: 569rpx;
		height: 96rpx;
		background-color: #0eae64;
		color: #FFFFFF;
		text-align: center;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		border-radius: 10rpx;
	}
}
.login_register{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 32rpx;
	text{
		color: #222222;
		font-size: 26rpx;
	}
	.now_login{
		color: #FF7447;
	}
}
</style>
